<template>
    <div class="app-container">
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false"
            @closed="$emit('close')">
            <x-form ref="xForm" v-model="formData" v-loading="loading" :config="formConfig" />
        </el-dialog>
    </div>
</template>
  
<script>
import { addOrUpdateExpend, getExpendDetail } from '@/api/expend'
import { getToken } from '@/utils/auth'
import { importDic } from '../../utils'
import { importRules } from '@/utils/index'
 
export default {
    props: {
        mode: {
            type: String,
            required: true
        },
        id: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            dialogTitle: '编辑',
            dialogVisible: true,
            formDisabled: false,
            loading: 0,
            showBtn: true,
            formData: {},
            showNoSee: false
        }
    },
    computed: {
        formConfig() {
            const _this = this
            return {
                // disabled: _this.formDisabled,
                inline: false,
                item: [
                    { xType: 'select', name: 'expendType', label: '支出类型', rules:importRules('inputRequired'), dic:importDic('expendType'),disabled:_this.formDisabled },
                    { xType: 'input', name: 'expendMoney', label: '支出金额',readonly:_this.formDisabled },
                    { xType: 'input', name: 'purpose', label: '支出用途',readonly:_this.formDisabled },
                ],
                operate: [
                    { text: '保存', show: _this.showBtn, click: _this.addOrUpdateExpend },
                    { text: '取消', show: _this.showBtn, click: () => { _this.dialogVisible = false } }
                ]
            }
        }
    },
    watch: {
        mode: {
            handler: function (mode) {
                if (this.mode === 'add') {
                    this.dialogTitle = '新建'
                }
                if (this.mode === 'edit') {
                    this.dialogTitle = '编辑'
                    this.getExpendDetail()
                }
                if (this.mode === 'detail') {
                    this.dialogTitle = '详情'
                    this.getExpendDetail()
                    this.formDisabled = true
                    this.showBtn = false
                    this.showNoSee = true
                }
            },
            immediate: true
        }
    },
    methods: {
        getExpendDetail() {
            this.loading++
            getExpendDetail(this.id, getToken()).then(res => {
                console.log('getExpendDetail' + res.result)
                this.formData = res.result
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        addOrUpdateExpend() {
            this.$refs['xForm'].validate().then(() => {
                this.loading++;
                addOrUpdateExpend(this.formData, getToken()).then(res => {
                    console.log('addOrUpdateexpend' + res)
                    this.dialogVisible = false
                    this.$message.success(res.message)
                    this.$emit('refresh')
                }).catch(e => console.error(e)).finally(() => this.loading--)
            }).catch(e => console.error(e))
        }
    }
}
</script>